<template>
  <div class="">
    <van-nav-bar
      @click-left="$router.back()"
      left-arrow
      :title="`${$route.query.title}详情`"
      fixed
    >
    </van-nav-bar>
    <header>
      <div class="left">
        <img :src="taskDetail.cover" alt="" />
      </div>
      <div class="right">
        <span class="title">{{ taskDetail.title }}</span>
        <span class="p">{{ taskDetail.description }}</span>
        <div class="bottom" v-if="$route.query.title == '任务'">
          <span>奖金额：{{ taskDetail.spreadPrice || 0 }}元/次</span>
          <span>已获得金额：{{ taskDetail.historyIncome || 0 }}元</span>
        </div>
        <div class="bottom" v-else>
          <span>转发:{{ taskDetail.share }}次</span>
          <span>阅读:{{ taskDetail.score || 0 }}次</span>
          <span>上传时间:{{ taskDetail.gmtCreate }}</span>
        </div>
      </div>
    </header>
    <main>
      <h3>客户阅读信息</h3>
      <div class="content" v-if="clientArr.length !== 0">
        <van-list
          v-model="loading"
          :finished="finished"
          :immediate-check="false"
          @load="onLoad"
        >
          <div class="item" v-for="(item, index) in clientArr" :key="index">
            <div class="left">
              <img :src="$publicObj.urlImg(item.image)" alt="" />
            </div>
            <div class="right">
              <h3>{{ item.nickname }}</h3>
              <div class="foot">
                <p>{{ item.gmtCreate.slice(0, 11) }}</p>
                <div class="rights">
                  <span>时长</span>
                  <span>阅读{{ $publicObj.mssTime(item.standingTime) }}</span>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </div>
      <van-empty description="暂无数据" v-else />
    </main>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      clientArr: [],
      taskDetail: {},
      loading: false, //加载状态
      finished: false, //完成
      page: 1, //页数
      limit: 8, //条数
      totalPage: 100, //总页数
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    document.querySelector("html").style.backgroundColor = "#f3f5f7";
    document.querySelector("body").style.backgroundColor = "#f3f5f7";
    this.taskDetail = JSON.parse(sessionStorage.getItem("taskDetail"));
    this.getPromotionTaskDetail();
  },
  methods: {
    //触底下一页
    onLoad() {
      if (this.page >= this.totalPage) {
        this.finished = true;
        return;
      }
      this.page++;

      this.getPromotionTaskDetail();
      // 加载状态结束
      this.loading = false;
    },
    //获取详情
    async getPromotionTaskDetail() {
      let res = await this.$api.getPromotionTaskDetail({
        id: this.$route.query.id,
        page: this.page,
        limit: this.limit,
      });
      if (res.code !== 0) return;
      //判断是否是第一页
      if (this.page == 1) {
        this.clientArr = res.data.list || [];
      } else {
        this.clientArr.push(...res.data.list);
      }
      this.totalPage = res.data.totalPage;
    },
  },
};
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
header {
  background-color: #fff;
  display: flex;
  padding: 15px;
  padding-top: 61px;
  box-sizing: border-box;
  .left {
    flex: 1;
    width: 90px;
    height: 90px;
    margin-right: 15px;
    img {
      width: 90px;
      height: 90px;
    }
  }
  .right {
    flex: 3;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    span {
      font-size: 11px;
      color: #999999;
    }
    .title {
      display: block;
      font-size: 14px;
      color: #333333;
    }
    .p {
      margin-top: 3px;
      height: 30px;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
    }
    .bottom {
      width: 246px;
      margin-top: 8px;
      display: flex;
      justify-content: space-between;
    }
  }
}
main {
  padding: 0 15px;
  background-color: #f3f5f7;
  h3 {
    font-size: 14px;
    font-weight: 700;
    color: #333333;
    margin: 20px 0 10px;
  }
  .content {
    background: #ffffff;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.08);
    height: calc(100vh - 280px);
    overflow-y: scroll;
    .item {
      display: flex;
      align-items: center;
      padding: 15px;
      border-bottom: 1px solid #f5f6f8;
      .left {
        img {
          width: 53px;
          height: 53px;
          border-radius: 50%;
        }
      }
      .right {
        margin-left: 12px;
        flex: 1;
        height: 53px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        h3 {
          margin: 0;
          font-weight: 400;
        }
        .foot {
          display: flex;
          align-items: center;
          justify-content: space-between;
          p {
            font-size: 10px;
            color: #999999;
          }
          .rights {
            font-size: 12px;
            color: #999999;
            span {
              margin-right: 9px;
              &:last-of-type {
                padding-left: 10px;
                border-left: 1px solid #999999;
                color: #666666;
              }
            }
          }
        }
      }
    }
  }
}
</style>
